<!DOCTYPE html>
<html>
    <head>
        <!--设定页面使用的字符集-->
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <!--让viewport（视口）的宽度等于物理设备上的真实分辨率，不允许用户缩放-->
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
        
        <title>精英汇登陆</title>
        <!--引入式样式表。外部格式链接，设置CSS样式,rel(关系)stylesheet(样式表)，href是URL：连接的文档是一个新样式表-->
        <link rel="stylesheet" href="css/login.css">
        <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
        <script>
            async function login1() {
                const userNameInput = document.querySelector('input[placeholder="用户名1"]');
                const passWordInput = document.querySelector('input[placeholder="密码1"]');
                const userName = userNameInput.value;
                const passWord = passWordInput.value;


                if (!userName || !passWord) {
                    alert('请输入用户名和密码');
                    return;
                }

                try {
                    const response = await fetch('http://localhost:3000/login', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        //'token':sessionStorage.getItem('token')
                    },
                    body: JSON.stringify({ userName, passWord })
                    });
                    const data = await response.json();
                    if (data.token) {
                        console.log(data.token)
                        sessionStorage.setItem('token',data.token)
                    alert('登陆成功');
                    // 跳转到index.html页面
                    window.location.href = 'index.html';
                    } else {
                    
                    alert('登录失败，原因：' + data.errorMsg);
                    }
                } catch (error) {
                    console.error("Error:", error);
                }
                }



            async function register1() {
                const userName = document.querySelector('input[placeholder="用户名"]').value;
                const passWord = document.querySelector('input[placeholder="密码"]').value;

                if (!userName || !passWord) {
                    alert('请输入用户名和密码！');
                    return;
                }

                try {
                    const response = await fetch('http://localhost:3000/register', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({ userName, passWord })
                    });

                    if (response.status === 200) {
                        alert('注册成功');
                        window.location.href = 'login.html';
                    } else {
                        const data = await response.json();
                        alert('注册失败，原因：' + data.errorMsg);
                    }
                } catch (error) {
                    console.error("Error:", error);
                }
            }

            
        </script>
    </head>
    <body>
        <div class="container">
            <div class="form-box">
                <!--注册-->
                <div class="register-box hidden">
                    <h1>register</h1>
                    <input type="text" placeholder="用户名">
                    <input type="passWord" placeholder="密码">
                    <button onclick="register1()">注册</button>
                </div>
                <!--登录-->
                <div class="login-box">
                    <h1>login</h1>
                    <input type="text" placeholder="用户名1">
                    <input type="passWord" placeholder="密码1">
                    <button onclick="login1()">登录</button>
                </div>
            </div>

            <div class="con-box left">
                <h2><span>精英汇</span></h2>
                <p>一个适合你的找工作网站</p>
                <img src="../work/img/login1.png" alt="">
                <p>已有账号</p>
                <button id="login">去登录</button>
            </div>

            <div class="con-box right">
                <h2><span>精英汇</span></h2>
                <p>每一次点击，都是通往未来的一步</p>
                <img src="../work/img/login2.png" alt="">
                <p>没有账号？</p>
                <button id="register">去注册</button>
            </div>
        </div>

        <script src="js/login.js"></script>
        <!-- <script src="js/register.js"></script> -->
    </body>
</html>